<template>
    <div class="score-manage">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片区域 -->
        <el-card shadow="never">
            <!-- 查询 -->
            <el-row>
                <el-col :span="8">
                    <el-input
                        placeholder="用户关键字查询"
                        v-model="queryInfo.query"
                        size="small"
                    >
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                        ></el-button>
                    </el-input>
                </el-col>

                <el-col :offset="1" :span="4">
                    <el-button
                        type="primary"
                        size="small"
                        @click="showAddScoreDialog"
                        >添加成绩</el-button
                    >
                </el-col>
            </el-row>

            <!-- 数据列表 -->
            <el-table :data="list" border style="width: 100%">
                <el-table-column prop="relname" label="姓名"> </el-table-column>

                <el-table-column prop="theory" label="理论成绩">
                </el-table-column>

                <el-table-column prop="skill" label="技能成绩">
                </el-table-column>

                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                            @click="editScore(scope.row)"
                            type="primary"
                            size="mini"
                            >编辑</el-button
                        >
                        <el-button
                            @click="deleteScore(scope.row)"
                            type="danger"
                            size="mini"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                :current-page.sync="queryInfo.pagenum"
                :page-sizes="[1, 5, 10, 50]"
                :page-size.sync="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="getScoreList"
                @current-change="getScoreList"
            >
            </el-pagination>
        </el-card>

        <!-- 弹框 -->
        <el-dialog
            title="添加成绩"
            :visible.sync="addScoreDialogVisible"
            @close="addScoreDialogClosed"
        >
            <el-form :model="addScoreFrom" ref="addScoreFormRef">
                <el-form-item label="理论成绩" prop="theory">
                    <el-input
                        v-model="addScoreFrom.theory"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>

                <el-form-item label="技能成绩" prop="skill">
                    <el-input
                        v-model="addScoreFrom.skill"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>

                <el-form-item label="选择学生" prop="uid">
                    <el-select
                        v-model="addScoreFrom.uid"
                        placeholder="请选择学生"
                    >
                        <el-option
                            v-for="item in stuList"
                            :key="item.uid"
                            :label="`${item.relname} (${item.username})`"
                            :value="item.uid"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addScoreDialogVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="addScoreFromSubmit"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    mounted() {
        this.getScoreList();
        this.getStuList();
    },
    data() {
        return {
            queryInfo: {
                pagenum: 1,
                pagesize: 10,
                query: '',
            },
            total: 0,
            list: [],
            addScoreDialogVisible: false,
            addScoreFrom: {
                theory: '',
                skill: '',
                uid: '',
            },
            stuList: [],
        };
    },
    methods: {
        async getScoreList() {
            let res = await this.$http.get('/scores', {
                params: this.queryInfo,
            });
            console.log(res);
            this.list = res.data.list;
            this.total = res.data.total;
        },
        async getStuList() {
            let res = await this.$http.get('/users/student');
            this.stuList = res.data;
        },
        showAddScoreDialog() {
            this.addScoreDialogVisible = true;
        },
        async addScoreFromSubmit() {
            console.log('this.addScoreFrom', this.addScoreFrom);
            const res = await this.$http.post('/scores', this.addScoreFrom);
            if (res.code !== 201) {
                this.$message.error(res.message);
                return;
            }
            // 添加成功，提示用户并关闭弹框
            this.$message.success(res.message);
            this.addScoreDialogVisible = false;
            // 刷新一下列表
            this.getScoreList();
        },
        addScoreDialogClosed() {
            this.$refs.addScoreFormRef.resetFields();
        },
    },
};
</script>
